<template>
  <div class="app-container">
    <div class="footer">
      <div class="util">
        <el-button type="primary" @click="addHandler" v-if="auth && auth.add">
          <el-icon><Plus /></el-icon>
          新增菜单
        </el-button>
      </div>
      <div class="table-inner">
        <el-table
          class="table"
          v-loading="loading"
          :data="list"
          row-key="id"
          style="width: 100%"
          border
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <el-table-column prop="title" label="菜单" />
          <el-table-column prop="href" label="路由" />
          <el-table-column prop="icon" label="图标" align="center">
            <template #default="scope">
              <el-button link :icon="scope.row.icon"></el-button>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center" width="100" />
          <el-table-column prop="status" label="状态" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                inline-prompt
                :active-value="1"
                :inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                :disabled="auth && !auth.modify"
                @change="changeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作" width="200" align="center">
            <template #default="scope">
              <!-- <el-button type="success" size="small" icon="View" @click="lowerHandler(scope.row)">
                下级菜单
              </el-button> -->
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="editHandler(scope.row)"
                v-if="auth && auth.edit"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="del(scope.row)"
                v-if="auth && auth.delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <MenuDialog ref="menuDialog" @refresh="getList"></MenuDialog>
    <MenyDrawer ref="menyDrawer"></MenyDrawer>
  </div>
</template>

<script lang="ts" setup>
import { menu, deleteMenu, editMenu, modifyMenu } from '@/api/admin'
import MenuDialog from './components/MenuDialog.vue'
import MenyDrawer from './components/MenyDrawer.vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { nextTick, reactive, ref } from 'vue'
const loading = ref(false)
const list = ref()
const auth = ref()
const menuDialog = ref()
const menyDrawer = ref()
const getList = () => {
  loading.value = true
  menu({}).then((res) => {
    if (res.code == 200) {
      auth.value = res.data.auth
      list.value = []
      let arr = res.data.data
      arr.forEach((item) => {
        if (item.pid == 0) {
          item.children = []
          list.value.push(item)
        }
      })
      arr.forEach((item) => {
        let index = list.value.findIndex((it) => {
          return it.id == item.pid
        })
        if (index != -1) {
          list.value[index].children.push(item)
        }
      })
    }
    loading.value = false
  })
}
const addHandler = () => {
  menuDialog.value.show()
}
const editHandler = (row) => {
  menuDialog.value.show(row)
}
const del = (row) => {
  ElMessageBox.confirm(`你确定要删除菜单 “${row.title}” 吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    deleteMenu({ id: row.id }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}

const changeStatus = (row) => {
  ElMessageBox.confirm(
    `确定要${!row.status ? '关闭' : '开启'}菜单 “${row.title}” 吗？`,
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      modifyMenu({
        id: row.id,
        field: 'status',
        value: row.status,
      }).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: `${!row.status ? '关闭' : '开启'}成功`,
            message: res.msg,
            type: 'success',
          })
        } else {
          if (row.status == 0) row.status = 1
          else if (row.status == 1) row.status = 0
        }
      })
    })
    .catch(() => {
      if (row.status == 0) row.status = 1
      else if (row.status == 1) row.status = 0
    })
}

const lowerHandler = (row) => {
  menyDrawer.value.show(row, list.value)
}

getList()
</script>

<style scoped lang="scss">
@import './index';
</style>
